@charset "utf-8";

@import "variables","common" ;

body {
  @include base-backgroundcolor(96%, 1);
}
body, html {
  font-size: ((100vw/1080)*100);
}
.cap-top-primary {
  margin-top: $cap-top-primary;
}
.c-topic_brand {
  position: relative;
  height:0;
  padding-bottom:56.25%;
  transition:height .25s ease-in-out;
  overflow:hidden;
  background-color: #fff;
  & img {
    position: absolute;
    display:block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width:100%;
    height: 100%;
  }
  &.dynamic {
    &::before {
      position: absolute;
      content: '互动剧';
      color: #fff;
      font-size: .36rem;
      text-align: center;
      line-height: .74rem;
      right: 0;
      top: 0;
      width: 1.56rem;
      height: .72rem;
      z-index: 2;
      background: url('../common/images/dynaprogram-label.png') no-repeat right top;
      background-size: cover;
    }
  }   
}
.D3media,
.viewmedia { 
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;   
}
img.toptic-media {
  position: absolute;
  z-index: -1;
  top:0;
  height:100%;
  width:0;
}
.recommend-play_icon {
  position: absolute;
  top:0;
  z-index: 1;
  width:100%;
  height:100%;
  background: rgba(38,38,38,.25) url('../common/images/recommend_play_normal.png') no-repeat center 48%;
  background-size: 17% auto;
}
.mes-box {
  @include base-backgroundcolor(100%, 1);
  position: relative;
  padding: .6rem .3rem 0;
}
.mes-box_title {
  @include font-color(20%);
  padding: 0 0 .34rem;
  font-size: .51rem;
  font-weight: bold;
  & .title {
    display: inline-block;
    width: 6.6rem;
    height: .65rem;
    line-height: 1.57;        
    overflow: hidden;
    text-overflow: ellipsis;
  }
  & .itemtitle {
    display: inline-block;
    width: calc(100vw - 4.84rem);
    vertical-align: top;
  }
}
.mes-box_mirrordesc {
  @extend %flex;
  position: relative;
  margin-bottom: 2%;
  margin-top:-17.5%;
  z-index:100;
}
.mes-box_mirrorinfo {
  & .title {
    @include font-color(100%);
    font-size: .51rem;  
    padding:.55em 0 .9em;
  }
  .mes-play_score {
    float: normal;
  }
}
.mes-play_score {
  @include font-color(53.5%);
  padding-top: .09rem;
  padding-bottom: .85em;
  font-size: .36rem;
  font-weight: normal;
}
.mes-box_mirrorimg {
  -webkit-flex:1 1 35%;
  flex:1 1 35%;
  padding-right:1em;
  min-height:4em;
  height:fit-content;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  & img {
    max-width:100%;
    border-radius:.25em;
    border:2px solid #fff;
    box-shadow: 0 1px 2px 0px hsla(45,45,45,.25);        
  }
}
.mes-box_mirrordesc {
  -webkit-flex:1 1 65%;
  flex:1 1 65%;
}
.mes-box_mes {
  @include font-color(70.5%);
  padding-bottom: .48rem;
  font-size: .33rem;
  line-height: 1.571;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow: hidden;
  text-align: justify;
  &.size-x {
    -webkit-line-clamp:6;        
  }
  .name {
    @include font-color(16.5%);
  }
  .more {
    color: #29A1F7;
  }
  &.size-l{
    padding-bottom: 0;  
  }
}
.mes-box_actors {
  padding-bottom: .3rem;
}
.mes-box_desc {   
  height: .65rem;
  height:-webkit-fit-content;
  height:fit-content;
}
.mex-box_flex {
  @extend %flex;
  padding-bottom:.20em;
  & li {
    @extend %flex-double-item;
  }
}
.c-media_separator {
  display: inline-block;
  padding: 0 .3em;
  vertical-align: middle;
}
.c-topic_media {
  display:block;
  width:100%;
}
.c-media_labels {
  @include base-backgroundcolor(100%, 0);
  @include font-color(100%);
  position: absolute;
  bottom:0;
  z-index: 2;
  width:100%;
  padding:0 1em .5em 0;
  text-align: right;
  font-size: .36rem;
}
.c-recommand {
  @include base-backgroundcolor(100%, 1);
  margin-top: .3rem;
}
.c-recommand_title {
  @include font-color(16.5%);
  padding: .42rem .45rem;
  font-size: .48rem;
  font-weight: 500;
}
.icon-recommandLine {
  @include background-color(204,100%,47%,1);
  display: inline-block;
  width:.17em;
  height:1em;
  margin-top:-1px;
  margin-right: .45em;
  border-top-right-radius:2px;
  border-bottom-right-radius:2px;
  vertical-align: middle;
}
.c-recommand_item {
  @extend %flex;
  padding: 0 .45rem .36rem; 
}
.c-recommand_image {
  width:37%;
  &>img {
    display: block;
    width:100%;
  }
}
.c-recommand_mes {
  @extend %flex;
  width:63%;
  flex-direction:column;
  padding-left: .45rem;
  justify-content:center;
}
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/*详情页*/
.c-recommand_smalltitle {
  @include font-color(16.5%);
  @extend .line-message;
  font-size: .39rem;
}
.horizontal-line_gray {
  margin: .48rem 0;
  height:1px;
  border-top-color:hsla(0,0%, 0%, .05);
  border-width:1px 0 0;
}
.c-recommand_labels {
  @include font-color(54%);
  font-size: .36rem;
}
.mes-box_labels {
  @include font-color(60%);
  font-size: .36rem;
  &>.playcount {
    padding-right: .48rem;
  }
  .label {
    display: inline-block;
    padding: .06rem .24rem .05rem;
    color: rgba(41, 161, 247, .6);
  }
}
.c-recommand_labels {
  margin:.8em 0 0;
}
.icon-playcount {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-top: -2px;
  margin-right: .18rem;
  background:url('../common/images/icon_play.png') no-repeat center;
  background-size:100%;
  vertical-align: middle;
}
.icon-address {
  display: inline-block;
  width: .3rem;
  height: .34rem;
  margin-top:-2px;
  background:url('../common/images/icon_address.png') no-repeat center;
  background-size:100%;
  vertical-align: middle;
}
.icon-showmore {
  display: inline-block;
  width: .28rem;
  height: .28rem;
  background:url('../common/images/show_more.png') no-repeat center;
  background-size: 100%;
  vertical-align: middle;
  margin-top: -2px;
}
.icon-hidemore {
  display: inline-block;
  width: .28rem;
  height: .28rem;
  background:url('../common/images/hide_more.png') no-repeat center top;
  background-size: 100%;
  vertical-align: middle;
}
.icon-livecount {
  display:inline-block;
  width: .35rem;
  height: .42rem;
  margin-right:.25em;
  margin-top:-2px;
  background:url('../common/images/icon_live_count.png') no-repeat center;
  background-size:100%;
  vertical-align: middle;
}
$star-height: .39rem;
.icon-star {
  display: inline-block;
  width: 2.076rem;
  height: $star-height;
  overflow: hidden;
  margin: 0 .35em 0;
  background-image:url('../common/images/stars.png');
  background-repeat: no-repeat;
  background-size: 100%;
  vertical-align: middle;
}
.icon-star1 {
  background-position: 0 -1*$star-height;
}
.icon-star2 {
  background-position: 0 (-2*$star-height);
}
.icon-star3 {
  background-position: 0 (-3*$star-height);
}
.icon-star4 {
  background-position: 0 (-4*$star-height);
}
.icon-star5 {
  background-position: 0 (-5*$star-height) - .01rem;
}
.icon-star6 {
  background-position: 0 (-6*$star-height) - .01rem;
}
.icon-star7 {
  background-position: 0 (-7*$star-height) - .016rem;
}
.icon-star8 {
  background-position: 0 (-8*$star-height) - .02rem;
}
.icon-star9 {
  background-position: 0 (-9*$star-height) - .02rem;
}
.icon-star10 {
  background-position: 0 (-10*$star-height) - .025rem;
}

/*mask level*/
.c-mask {
  @include base-backgroundcolor(2%, .6);
  position: absolute;
  top:0;
  z-index:99;
  width:100%;
  height:100%;
  -webkit-transition:all 0.25s ease-in-out;
  transition:all 0.25s ease-in-out; 
  overflow: hidden;   
}
.c-mask.specialTopic {
  position: fixed;
}
.c-mask.hide {
  -webkit-transform:translateY(-200%);
  transform:translateY(-200%);    
}
.c-mask.show{
  -webkit-transform:translateY(0);
  transform:translateY(0);    
}
.c-mask_section {
  @extend %flex;
  @include font-color(100%);
  width:inherit;
  height: inherit;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-justify-content:center;
  padding-top:25%;
  padding-bottom:20%;
  justify-content:center;
  font-size: .56rem;
  text-align: center;
  &>li {
    flex-grow:1;
    height: 50%;
  }
}
.c-mask_section >li:first-child {
  margin-top:-.5em;
  font-size:1.45em;
  letter-spacing: .075em;
}
.c-mask.specialTopic .c-mask_section {
  padding-top:50vh;
}
.c-mask_section3D {
  @extend %flex;
  @include font-color(100%);
  width:inherit;
  height: inherit;
  flex-direction:column;
  align-items:center;
}
.c-mask_link3D {
  flex:1 1 20%;
}
.c-mask_flag {
  @extend %flex;
  flex:1 1 45%;
  padding:5% 16% 0;
  align-items:center;
  font-size: .56rem;
}
.c-mask_title3D {
  @extend %flex;
  flex:1 1 10%;
  align-items:flex-end;
}
.c-mask_link {
  padding-top: 6.5%;
}
.button {
  display: inline-block;
}
.c-mask_btn {
  @include font-color(100%);
  @include background-color(203,99%, 60%, 1);
  padding:.7em 1.35em .6em;
  text-align: center;
  font-size: .42rem;
  border-radius: .12rem;
}
.err-tip-contain {
  height: 50vh;
  padding-top: 10vh;
  text-align: center;
  color: #dadada;
  font-size: .36rem;
}
.spinner {
  width: 60px;
  height: 60px;
  background-color: #67CF22;
  margin: 100px auto;
  animation: rotateplane 1.2s infinite ease-in-out;
}
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
